<template>
  <!-- 用户权限 -->
  <div class="user">
    <!-- 公共头部标题 -->
    <div class="common-title">
      <div>
        <em></em>
        <span>用户管理</span>
      </div>
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">纪检监察信息化平台</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="common-card">
      <!-- 头部查询信息 -->
      <div class="common-card-head">
        <div class="filter-type">
          <el-input
            v-model="aa"
            :disabled="true"
            class="type1"
          ></el-input>
          <el-select
            class="type2"
            placeholder="所有级别"
            v-model="role"
          >
            <el-option
              v-for="item in roleOpt"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="filter-type">
          <el-input
            v-model="bb"
            :disabled="true"
            class="type1"
          ></el-input>
          <el-select
            class="type2"
            placeholder="所有部门"
            v-model="part"
          >
            <el-option
              v-for="item in partOpt"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="filter-type">
          <el-input
            v-model="cc"
            :disabled="true"
            class="type1"
          ></el-input>
          <el-input
            class="type2"
            v-model="name"
            placeholder="请输入"
            @keydown.native="keydown($event)"
          ></el-input>
        </div>
        <div class="filter-button">
          <el-button
            type="primary"
            @click="searchUser"
          >查询</el-button>
          <el-button @click="clearSearch">清空</el-button>
        </div>
      </div>
      <!-- 表单部分 -->
      <el-row class="user-list-head">
        <el-col :span="2">序号</el-col>
        <el-col :span="3">姓名</el-col>
        <el-col :span="4">所属部门</el-col>
        <el-col :span="4">级别</el-col>
        <el-col :span="4">账号</el-col>
        <el-col :span="4">密码</el-col>
        <el-col :span="3">操作</el-col>
      </el-row>
      <div class="user-list-body">
        <el-row
          v-for="(item,index) in userList"
          :key="item.id"
        >
          <!-- 序号 -->
          <el-col :span="2">
            <p>{{index+1}}</p>
          </el-col>
          <!-- 姓名 -->
          <el-col :span="3">
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.name"
              placement="top"
              :open-delay="500"
            >
              <p>{{item.name}}</p>
            </el-tooltip>
          </el-col>
          <!-- 所属部门 -->
          <el-col :span="4">
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.partDes"
              placement="top"
              :open-delay="500"
            >
              <p>{{item.partDes}}</p>
            </el-tooltip>
          </el-col>
          <!-- 角色 -->
          <el-col :span="4">
            <p>{{item.roleDes}}</p>
          </el-col>
          <!-- 账号 -->
          <el-col :span="4">
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.userId"
              placement="top"
              :open-delay="500"
            >
              <p>{{item.userId}}</p>
            </el-tooltip>
          </el-col>
          <!-- 密码 -->
          <el-col :span="4">
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.password"
              placement="top"
              :open-delay="500"
            >
              <p>{{item.password}}</p>
            </el-tooltip>
          </el-col>
          <!-- 操作 -->
          <el-col
            :span="3"
            class="operate"
          >
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
              :open-delay="500"
            >
              <i class="el-icon-edit"></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
              :open-delay="500"
            >
              <i class="el-icon-delete-solid"></i>
            </el-tooltip>
          </el-col>
        </el-row>
      </div>
      <!-- 分页器 -->
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="size"
          layout="total, sizes, prev, pager, next"
          :page-sizes="[20, 50, 100, 200]"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aa: '级别',
      bb: '所属部门',
      cc: '名称',
      // 角色信息
      roleOpt: [
        {
          value: '1',
          name: '超级管理员'
        },
        {
          value: '2',
          name: '普通管理员'
        }
      ],
      // 部门信息
      partOpt: [
        {
          value: '1',
          name: '组织部'
        },
        {
          value: '2',
          name: '宣传部'
        },
        {
          value: '3',
          name: '党支部'
        },
        {
          value: '4',
          name: '后勤部'
        },
      ],
      role: '', // 所属角色
      part: '', // 所属部门
      name: '', // 名称
      currentPage: 1, // 当前页
      size: 20, //每页多少
      total: 30, // 总共多少
      userList: [
        {
          id: 1,
          name: '张三',
          part: '1',
          partDes: '组织部',
          role: '1',
          roleDes: '超级管理员',
          userId: '123321',
          password: '520599'
        },
        {
          id: 2,
          name: '李四',
          part: '2',
          partDes: '宣传部',
          role: '2',
          roleDes: '普通管理员',
          userId: '123321',
          password: '520123'
        },
        {
          id: 3,
          name: '王五',
          part: '3',
          partDes: '党支部',
          role: '2',
          roleDes: '普通管理员',
          userId: '123321',
          password: '520231'
        },
        {
          id: 4,
          name: '李六',
          part: '4',
          partDes: '后勤部',
          role: '2',
          roleDes: '普通管理员',
          userId: '123321',
          password: '520321'
        },
        {
          id: 5,
          name: '张三',
          part: '1',
          partDes: '组织部',
          role: '2',
          roleDes: '超级管理员',
          userId: '123321',
          password: '520213'
        },
        {
          id: 6,
          name: '张三',
          part: '2',
          partDes: '宣传部',
          role: '2',
          roleDes: '普通管理员',
          userId: '123321',
          password: '520312'
        }
      ]
    }
  },
  methods: {
    // 禁止输入空格
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false
      }
    },
    searchUser() {
      console.log('搜索')
    },
    clearSearch() {
      console.log('清空')
    },
    // 改变每页多少条
    handleSizeChange(val) {
      this.size = val;
    },
    // 页面跳转
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  }
}
</script>

<style scoped lang="less">
.user {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-row {
    height: 45px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .el-col {
      padding-right: 6px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      p {
        line-height: 21px;
        font-size: 14px;
        font-weight: 400;
        color: #4d4d4d;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    &:nth-child(2n + 1) {
      background: #ffffff;
    }
  }
  /* 公共卡片样式 */
  .common-card {
    width: 100%;
    flex: 1;
    box-shadow: 0px 1px 4px 0px rgba(0, 59, 129, 0.15);
    background: rgba(255, 255, 255, 0.66);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  // 公共卡片样式头部
  .common-card-head {
    display: flex;
    align-items: center;
    height: 50px;
    background: #ffffff;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .user-list-head {
    height: 40px;
    background: transparent;
    font-size: 14px;
    font-weight: bold;
    color: #1a1a1a;
  }
  .user-list-body {
    height: 0;
    flex: 1;
    overflow: auto;
  }
  // 分页
  .page {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .el-pagination {
      margin-right: 40px;
    }
  }
}
</style>
